<template>
  <div>
    <BasicInfo />

    <Experience />
    <h2 class="title text-white">项目经验</h2>

    <div class="project gsap pin">
      <Qidaka />
    </div>
    <div class="project gsap pin">
      <Yutong />
    </div>
    <div class="project gsap pin">
      <Gbei />
    </div>
    <div class="project gsap pin">
      <Mobile />
    </div>
    <div class="project">
      <Skill />
    </div>
    <Contact />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { gsap, ScrollTrigger } from 'gsap/all'

import BasicInfo from './components/BasicInfo.vue'
import Experience from './components/Experience.vue'
import Skill from './components/Skill.vue'
import Contact from './components/Contact.vue'

import Qidaka from './components/Qidaka.vue'
import Yutong from './components/Yutong.vue'
import Gbei from './components/Gbei.vue'
import Mobile from './components/Mobile.vue'

gsap.registerPlugin(ScrollTrigger)

onMounted(() => {
  gsap.utils.toArray('.gsap.pin').forEach((pin) => {
    ScrollTrigger.create({
      trigger: pin,
      start: 'top top',
      pin: true,
      pinSpacing: false
    })
  })
})
</script>

<style lang="scss">
.project {
  width: 100%;
  overflow: hidden;
}

.describe {
  margin-top: 8px;
  padding-left: 12px;

  p.dot {
    $size: 6px;
    position: relative;
    margin: 4px 0;

    &::before {
      width: $size;
      height: $size;
      border-radius: $size;
      position: absolute;
      content: '';
      background: #fff;
      left: -12px;
      top: 8px;
    }
  }
}
</style>
